<template>
	<div class="boardUser">
		<div class="you">
			<div v-if="you.username">
				<img :src="userStore.avatarUrl(you.avatar)" alt="" />
				<h2>{{ you.username }}</h2>
			</div>
			<h2 v-else>等待对手</h2>
		</div>
		<div>
			<h1 v-if="gamestatus.winner">游戏结束，{{ gamestatus.winner }} 获胜</h1>
			<h1 v-else-if="you.username">
				{{ gamestatus.myAction ? "轮到你下" : "等待对手下" }}
			</h1>
			<h1 v-else>游戏未开始</h1>
		</div>
		<div class="me">
			<div>
				<img :src="userStore.avatarUrl(me.avatar)" alt="" />
				<h2>{{ me.username }}</h2>
			</div>
		</div>
	</div>
</template>
<script setup>
import { ref, watch } from "vue";
import useGamestatus from "../stores/game";
import { useUserStore } from "../stores/user";
import useNetStore from "../stores/net.js";

let net = useNetStore();

const gamestatus = useGamestatus();
let userStore = useUserStore();
const me = ref({});
const you = ref({});
const userTable = ref([]);
const myRoom = ref({});
const index = ref(0); //房间索引

watch(
	() => gamestatus.rooms,
	() => {
		getYouUserId();
		getYouAll();
	},
	{ deep: true, immediate: true }
);
watch(
	userTable,
	() => {
		getYouAll();
	},
	{ immediate: true, deep: true }
);
function getYouUserId() {
	net.get("/users/userTable")
		.then((res) => {
			if (res.code === 200) {
				userTable.value = res.data;
				userTable.value.forEach((item) => {
					if (item.userId === userStore.user.userId) {
						me.value = item;
					}
				});
        you.value.userId = myRoom.value.players.find((item) => item.userId !== userStore.user.userId) ? myRoom.value.players.find((item) => item.userId !== userStore.user.userId).userId : null;
        if(!you.value.userId){
          you.value={};
        }
        console.log(you.value);
			} else {
				console.log(res.msg || "获取用户列表失败");
			}
		})
		.catch((err) => {
			console.error(err);
		});
	myRoom.value = gamestatus.rooms.find((item) => item.roomId === gamestatus.myRoomId);
	console.log(myRoom.value);
	
}
function getYouAll() {
	if (you.value.userId) {
		you.value = userTable.value.find((item) => item.userId === you.value.userId) ? userTable.value.find((item) => item.userId === you.value.userId) : {};
		console.log("找到了", you.value);
	}
}
</script>
<style scoped>
.boardUser {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0 16px;
	/* background: linear-gradient(135deg, #f6f7f9 0%, #e7ebf0 100%); */

	& > div {
		border: none;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 12px;
		background: #fff9e6;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(4px);

		& > h1 {
			color: #333;
			font-size: 18px;
			text-align: center;
			margin: 8px 0;
			font-weight: 500;
		}

		& > div {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 8px;

			& > img {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				object-fit: cover;
				border: 2px solid rgba(100, 149, 237, 0.3);
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;

				&:hover {
					transform: scale(1.05);
					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
				}
			}

			& > h2 {
				color: #444;
				font-size: 16px;
				font-weight: 500;
				margin-left: 12px;
			}
		}
	}

	& > .me {
		& > div {
			& > img {
				border-color: rgba(75, 192, 192, 0.3);
			}
		}
	}

	& > .you {
		& > div {
			& > img {
				border-color: rgba(255, 99, 132, 0.3);
			}
		}
	}
}
</style>
